<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<div>
				<el-select v-model="searchObj.managementArea" clearable class="zs-select-md zs-space-right-sm" placeholder="区域" multiple>
					<el-option v-for="item in options?.managementArea" :key="item.manageCode" :label="item.manageName" :value="item.manageCode" />
				</el-select>
				<el-select v-model="searchObj.projectCode" filterable clearable class="zs-select-md zs-space-right-sm" placeholder="项目">
					<el-option v-for="item in options?.projectMap" :key="item.key" :label="item.value" :value="item.key" />
				</el-select>
				<el-select v-model="searchObj.evalueResult" filterable clearable class="zs-select-md zs-space-right-sm" placeholder="评价结果">
					<el-option v-for="item in options?.evalueResult" :key="item" :label="item" :value="item" />
				</el-select>
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': searchObj.templateDifStr.length > 0 || searchObj.busiAliasName.length > 0 || searchObj.rresult || searchObj.startDate || searchObj.endDate }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-select v-model="searchObj.templateDifStr" filterable clearable class="zs-select-md zs-space-right-sm" placeholder="投诉渠道" collapse-tags collapse-tags-tooltip multiple :teleported="false">
							<el-option v-for="item in options?.templateDifStr" :key="item" :label="item" :value="item" />
						</el-select>
						<el-select v-model="searchObj.busiAliasName" filterable clearable class="zs-select-md zs-space-right-sm" placeholder="投诉类型" collapse-tags collapse-tags-tooltip multiple :teleported="false">
							<el-option v-for="item in options?.busiAliasName" :key="item" :label="item" :value="item" />
						</el-select>
						<el-select v-model="searchObj.rresult" filterable clearable class="zs-select-md zs-space-right-sm" placeholder="回访结果" :teleported="false">
							<el-option v-for="item in options?.rresult" :key="item" :label="item" :value="item" />
						</el-select>
						<el-date-picker v-model="searchObj.startDate" class="zs-select-md zs-space-right-sm zs-space-top" placeholder="投诉开始日期" style="width: 100%" value-format="YYYY-MM-DD" :teleported="false" />
						<el-date-picker v-model="searchObj.endDate" class="zs-select-md zs-space-right-sm zs-space-top" placeholder="投诉结束日期" style="width: 100%" value-format="YYYY-MM-DD" :teleported="false" />
					</template>
				</el-popover>
				<el-button class="zs-btn-plain" @click="queryList"> 查询 </el-button>
			</div>
			<div>
				<el-button class="zs-btn-plain" @click="exportFn">
					<el-icon class="el-icon--left"> <Upload /> </el-icon>导出
				</el-button>
			</div>
		</div>

		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" :align="'center'" :index="index => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="serviceOrderId" label="工单号" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="managementArea" label="区域" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="projectName" label="项目名称" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="busiAliasName" label="投诉类型" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="remark" label="反馈内容" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="resultStr" label="状态" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="evalueResult" label="评价星级" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="rresult" label="回访结果" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="rment" label="回访意见" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="contactName" label="发起人" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="contactTel" label="联系方式" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="houseinfo" label="房屋/地址" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="templateDifStr" label="投诉渠道" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="notename" label="录单人" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="createDate" label="录单时间" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="dealUserName" label="处理人" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="pment" label="处理意见" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="ptime" label="处理时间" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
				<el-table-column prop="duration" label="处理用时" show-overflow-tooltip align="left" minWidth="120" :formatter="defaultTableData" />
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { defaultTableData, downloadNewFile } from '@/utils/publicUtils';
	import projectListApi from '@/api/Property/projectList';
	import { useStore } from 'vuex';

	let store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);

	//查询条件
	let searchObj = reactive({ pageNum: 1, pageSize: curPageSize.value, managementArea: [], projectCode: '', evalueResult: '', templateDifStr: [], busiAliasName: [], startDate: '', endDate: '', rresult: '' });

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	// 列表数据源
	const queryList = async () => {
		tableData.loading = true;
		let res = await projectListApi.complaintSuggestListApi(searchObj);
		if (res.data.code !== 200) return;
		tableData.data = res.data.data.list;
		tableData.total = res.data.data.total || 0;
		tableData.loading = false;
	};

	//各种下拉数据源
	let options = ref();
	const getComplaintSuggestSelect = async () => {
		let res = await projectListApi.complaintSuggestSelectApi();
		res.data.data.projectMap = managementAreaOptions(res.data.data.projectMap)
		options.value = res.data.data;
	};

	const managementAreaOptions = list => {
		return Object.entries(list).map(([key, value]) => ({
			key,
			value,
		}));
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			searchObj.pageSize = size;
		} else {
			searchObj.pageNum = size;
		}
		queryList();
	};

	// 导出
	const exportFn = async () => {
		const fileName = `物业投诉建议统计表.xls`;
		let fileData = await projectListApi.complaintSuggestExportApi(searchObj);
		downloadNewFile(fileData.data, fileName);
	};

	queryList();
	getComplaintSuggestSelect();
</script>
